Toaster

Displays a non-intrusive toast notification to the user. Typically used for success, error, info, or warning messages.

---

🧩 Overview

The Toaster component provides short, transient messages that appear on the screen to inform users about the result of an action or system status without interrupting Pageflows. These messages automatically disappear after a specified duration.

---

⚙️ Configuration Options

Property	Description	Required	Example
Message	The text content displayed in the toast notification	Yes	"Data saved successfully"
Timer (Ms)	Duration the toast remains visible in milliseconds	Yes	3000 (3 seconds)

---

🔄 Usage Example

1. Trigger a toaster notification after a user action, such as saving a form.
2. Display the message with appropriate content.
3. Automatically hide the toast after the specified timer elapses.

---

🧪 Example Implementation (JavaScript/React)

function showToast(message, duration) {
  // Example using a toast library or custom implementation
  toast(message, {
    autoClose: duration,
    position: "top-right",
    type: "success",
  });
}

// Usage
showToast("Data saved successfully", 3000);

---

🎨 Appearance and Behavior

• Appears briefly in a corner of the UI (usually top-right or bottom-right)
• Does not block user interactions
• Supports different message types (success, error, warning, info) with different colors/icons
• Smooth fade-in and fade-out animations

---

🧠 Best Practices

• Keep messages concise and clear
• Use appropriate timer values to allow users enough time to read
• Avoid showing too many toasts at once to prevent clutter
• Ensure toasts are accessible (e.g., screen reader friendly)
• Provide consistent styling across the application

---

🔚 Summary

The Toaster component is an essential UX pattern for lightweight, non-intrusive feedback. Proper configuration and usage improve user awareness without disrupting their Pageflows.

---

Next Steps:

• Combine with Show Message for modal or alert dialogs
• Use Action Logs to track important notifications